<template>
  <div>
    <bread-crumb></bread-crumb>
    <h1>后台分页效果展示</h1>
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      height="500px"
      @row-click="goDetail"
    >
      <el-table-column prop="stu_id" label="学号" width="100">
      </el-table-column>
      <el-table-column prop="stu_name" label="姓名" width="100">
      </el-table-column>
      <el-table-column prop="stu_sex" label="性别" width="100">
      </el-table-column>
      <el-table-column prop="stu_date" label="出生日期" width="180">
        <template slot-scope="scope">
          <!-- <p></p> -->
          <p>{{ scope.$index }}</p>
          <p>{{ $moment(scope.row.stu_date).format("YYYY-MM-DD") }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="stu_head_img" label="头像">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.stu_head_img"
            :preview-src-list="srcList"
            @click="bigImage(scope.row.stu_head_img)"
          >
          </el-image>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="currentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import { req_code_stu_info } from "@/api/stuInfo.js";
export default {
  mounted() {
    /*let result = await req_code_stu_info(this.currentPage);
    console.log(result.data);
    //group_stuinfo  5条数据
    // pages  一共有多少页
    this.total = this.pageSize * result.data.pages;
    this.tableData = result.data.group_stuinfo; */
    this.getData(this.currentPage);
  },
  data() {
    return {
      tableData: [],
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
      ],
      total: 0,
      pageSize: 5,
      currentPage: 1,
    };
  },
  methods: {
    currentChange(value) {
      this.getData(value);
    },
    async getData(value) {
      console.log(value);
      let result = await req_code_stu_info(value);
      console.log(result.data);
      //group_stuinfo  5条数据
      // pages  一共有多少页
      this.total = this.pageSize * result.data.pages;
      this.tableData = result.data.group_stuinfo;
    },
    bigImage(value) {
      console.log(value);
      this.srcList[0] = value;
    },
    goDetail(row, column, event) {
      console.log(row, column, event);
      // 进行路由跳转是随便跳转的吗？
      // 不是 除了点击头像 其他都进行跳转
      console.log(event.target.tagName);
      if (event.target.tagName != "IMG") {
        this.$router.push({
          name: "stuDetail",
          query: {
            stuInfoDetail: JSON.stringify(row),
          },
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
div {
  div {
    height: 30px;
  }
}
</style>